<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <style>
    .password-verdict{
    color:#000;
    }
    </style>
    <script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/resources/pwstrength.js}"></script>
    <title th:utext="#{message.changePassword}">change password</title>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" th:utext="#{label.pages.home.title}">home</a>
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="@{/logout}" th:utext="#{label.pages.logout}">logout</a> </li>
      </ul>
    </div>
</nav>
    <div class="container">
        <div class="row">
        <div id="errormsg" class="alert alert-danger" style="display:none"></div>
            <h1 th:utext="#{message.changePassword}">change password </h1>
            <form >
                <br/>
                
                    <label class="col-sm-2" th:utext="#{label.user.oldPassword}">old</label>
                    <span class="col-sm-5"><input class="form-control" id="oldpass" name="oldPassword" type="password" value="" /></span>
                    <span class="col-sm-5"></span>
<br/><br/>         
                    <label class="col-sm-2" th:utext="#{label.user.newPassword}">new</label>
                    <span class="col-sm-5"><input class="form-control" id="password" name="newPassword" type="password" value="" /></span>
                    <div class="col-sm-12"></div>
                    
<br/><br/>
                    <label class="col-sm-2" th:utext="#{label.user.confirmPass}">confirm</label>
                    <div class="col-sm-5"><input class="form-control" id="matchPassword" name="matchingPassword" type="password" value="" /></div>
                    <div id="globalError" class="alert alert-danger col-sm-12" style="display:none">error</div>
                   
                
                <div class="col-sm-12">
                <br/><br/>
                <button class="btn btn-primary" type="submit" onclick="savePass()" th:utext="#{message.changePassword}">change
                </button>
                </div>
            </form>
            
        </div>
    </div>
    

    <script th:inline="javascript">
        var serverContext = [[@{/}]];

        $(document).ready(function () {
            $('form').submit(function(event) {
                savePass(event);
            });

            $(":password").keyup(function(){
                if($("#password").val() != $("#matchPassword").val()){
                    $("#globalError").show().html(/*[[#{PasswordMatches.user}]]*/);
                }else{
                    $("#globalError").html("").hide();
                }
            });

            options = {
                    common: {minChar:8},
                    ui: {
                        showVerdictsInsideProgressBar:true,
                        showErrors:true,
                        errorMessages:{
                              wordLength: /*[[#{error.wordLength}]]*/,
                              wordNotEmail: /*[[#{error.wordNotEmail}]]*/,
                              wordSequences: /*[[#{error.wordSequences}]]*/,
                              wordLowercase: /*[[#{error.wordLowercase}]]*/,
                              wordUppercase: /*[[#{error.wordUppercase}]]*/,
                              wordOneNumber: /*[[#{error.wordOneNumber}]]*/,
                              wordOneSpecialChar: /*[[#{error.wordOneSpecialChar}]]*/
                            }
                        }
                };
             $('#password').pwstrength(options);
        });

        function savePass(event){
            event.preventDefault();
            $(".alert").html("").hide();
            $(".error-list").html("");
            if($("#password").val() != $("#matchPassword").val()){
                $("#globalError").show().html(/*[[#{PasswordMatches.user}]]*/);
                return;
            }
            var formData= $('form').serialize();
            $.post(serverContext + "user/updatePassword",formData ,function(data){
                window.location.href = serverContext + "console.html" + "?message="+data.message;
            })
            .fail(function(data) {
                if(data.responseJSON.error.indexOf("InvalidOldPassword") > -1) {
                    $("#errormsg").show().append(data.responseJSON.message);
                }
                else if(data.responseJSON.error.indexOf("InternalError") > -1){
                    $("#errormsg").show().append(data.responseJSON.message);
                }
                else{
                    var errors = $.parseJSON(data.responseJSON.message);
                    $.each( errors, function( index,item ){
                        $("#globalError").show().html(item.defaultMessage);
                    });
                    errors = $.parseJSON(data.responseJSON.error);
                    $.each( errors, function( index,item ){
                        $("#globalError").show().append(item.defaultMessage+"<br/>");
                    });
                }
            });
        }

    </script>
</body>

</html>